<script setup lang="ts">
import { getArticleListApi } from '@/api/article'
import type { TableColumnProps } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const columns: TableColumnProps[] = [
  {
    title: '标题',
    dataIndex: 'title',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createtime',
    align: 'center'
  },
  {
    title: '更新时间',
    dataIndex: 'updatetime',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center'
  }
]
const total = ref(0)
const dataSource: Ref<ArticleListItem[]> = ref([])
onMounted(() => {
  getArticleList()
})

/**
 * 打开编辑页面
 */
function openEditorPage() {
  // 打开编辑页面
  router.push({
    path: '/editor'
  })
}

const getArticleList = async () => {
  const res = await getArticleListApi()
  console.log(res)
  if (res.code === 200) {
    //

    message.success('获取文章列表成功')
    dataSource.value = res.rows as ArticleListItem[]
    total.value = res.total || 0
  }
}
const handleOpenEdit = (data: ArticleListItem) => {
  console.log(data)
  // 打开编辑页面
  router.push({
    path: '/editor',
    query: { id: data.id }
  })
}
</script>
<template>
  <section class="h-box-margin-top-bottom">
    <a-form layout="inline">
      <a-form-item label="标签名"> <a-input></a-input></a-form-item>
      <a-form-item label="标签编码"><a-input></a-input></a-form-item>
      <a-form-item>
        <a-button-group>
          <a-button type="primary" @click="getArticleList">查询</a-button>
          <a-button> 重置</a-button>
        </a-button-group>
      </a-form-item>
    </a-form>
  </section>
  <section class="h-box-margin-top-bottom">
    <a-button type="primary" @click="openEditorPage">新增</a-button>
  </section>

  <section class="h-box-margin-top-bottom">
    <a-table :columns="columns" :data-source="dataSource">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button size="small">修改</a-button>
          <a-button size="small">删除</a-button>
          <a-button size="small" @click="handleOpenEdit(record)">编辑内容</a-button>
        </template>
      </template>
    </a-table>
  </section>
</template>
<style scoped></style>
